dotenv 模块
dotenv 模块是什么？
dotenv 是一个零依赖模块，可将环境变量从 .env 文件加载到 process.env 中。 将配置存储在与代码分开的环境中是基于十二因子应用方法的。
环境变量
环境变量使我们能够与代码库分开管理应用的配置。 分开的配置使我们的应用更容易在不同的环境中部署。
环境变量是应用外部的变量，它们驻留在运行生产应用的 OS 或容器中。 由于开发大部分是在本地计算机上完成的，因此环境变量可以通过set或export等命令放置到本地环境变量中，或者存储在本地.env文件中。
按照惯例，这些变量都写在大写字母（例如端口）。
存储在环境变量中的配置数据的常见示例包括：
- HTTP 端口
- 数据库连接字符串
- 静态文件的位置
- 外部服务的端点
绝对不要将 .env 文件提交到源代码存储库。 我们必须将文件放入.gitignore文件。 （使用 git 时。）
现代编辑器支持 .env 文件。 例如，code 具有 DotENV 扩展名。
dotenv解析规则
以下是一些基本的解析引擎规则：
BASIC=basic变为{BASIC: 'basic'}- 空行被跳过
- 注释以
#开头 - 空值变成空字符串；
BASIC=变为{BASIC: ''} - 内部引用保持不变
现有的环境变量不会被修改； 他们被跳过。
Dotenv 设置
我们将 dotenv 模块与 npm 一起安装。
$ node -v
v11.5.0
我们使用 Node 版本 11.5.0。
$ npm init -y
我们启动一个新的 Node 应用。
$ npm i dotenv
我们使用npm i dotenv命令安装dotenv。
dotenv简单示例
在第一个示例中，从.env文件中读取配置数据。
.env
HOST = localhost
DATABASE = ydb
PORT = 5432
我们有三个变量：HOST，DATABASE和PORT。 我们使用大写字母来遵守命名约定。
simple.js
require('dotenv').config()
const hostname = process.env.HOST;
const database = process.env.DATABASE;
const port = process.env.PORT;
console.log(hostname);
console.log(database);
console.log(port);
在示例中，我们读取了三个变量并将它们打印到控制台。
require('dotenv').config()
我们加载dotenv库，并调用config()的方法，它加载变量进入process.env。
const hostname = process.env.HOST;
const database = process.env.DATABASE;
const port = process.env.PORT;
我们从process.env中读取了三个变量。
console.log(hostname);
console.log(database);
console.log(port);
最后，变量被打印到终端。
$ node simple.js
localhost
ydb
5432
这是输出。
dotenv预加载
我们可以使用 --require（-r）命令行选项来预加载 dotenv。 这样，我们不需要在应用中要求和加载 dotenv。
.env
HOST = localhost
DATABASE = ydb
PORT = 5432
我们有相同的变量。
preload.js
const hostname = process.env.HOST;
const database = process.env.DATABASE;
const port = process.env.PORT;
const user = process.env.USER;
console.log(hostname);
console.log(database);
console.log(port);
console.log(user);
在此示例中，我们不需要 dotenv 模块。 另外，我们读取在 OS 环境中设置的变量。
$ set USER=user7
$ node -r dotenv/config preload.js
localhost
ydb
5432
user7
在 Windows 上，我们使用set定义环境变量。 （在 Linux 上使用export）。 变量打印确定。
配合 Webpack
为了在 Webpack 配置中加载 .env 文件，可以使用 dotenv 和 dotenv-webpack 插件。首先，你需要安装 dotenv-webpack 插件，如果你还没有安装dotenv，也推荐安装。
在终端运行以下命令来安装这两个包：
npm install dotenv dotenv-webpack --save-dev
接下来，你可以按照以下步骤修改你的Webpack配置文件以加载.env文件中的环境变量：
- 在文件顶部导入
dotenv-webpack插件。 - 在
plugins数组中添加一个新的dotenv-webpack实例。
修改后的 Webpack 配置文件应该像这样：
import webpack from 'webpack';
import TsconfigPathsPlugins from 'tsconfig-paths-webpack-plugin';
import webpackPaths from './webpack.paths';
import { dependencies as externals } from '../../release/app/package.json';
import DotenvWebpack from 'dotenv-webpack'; // 导入dotenv-webpack插件
const configuration: webpack.Configuration = {
externals: [...Object.keys(externals || {})],
stats: 'errors-only',
module: {
rules: [
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true,
compilerOptions: {
module: 'esnext',
},
},
},
},
],
},
output: {
path: webpackPaths.srcPath,
library: {
type: 'commonjs2',
},
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
modules: [webpackPaths.srcPath, 'node_modules'],
plugins: [new TsconfigPathsPlugins()],
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'production',
}),
new DotenvWebpack(), // 使用dotenv-webpack插件
],
};
export default configuration;
通过这种方式，dotenv-webpack插件会自动加载项目根目录下的.env文件，并将其中的变量注入到process.env中。如果你的.env文件位于不同的位置，或者你有多个.env文件，你可以在创建DotenvWebpack实例时传递配置选项来指定文件路径或设置其他选项。例如，如果你的.env文件位于一个自定义路径，你可以这样做：
new DotenvWebpack({
path: './some/other/path/.env', // 指定.env文件的路径
}),
这样，你就可以在Webpack构建的应用程序中使用环境变量了。